<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1{
				margin: 50px;
				width: 100px;
				height: 100px;
				background-color: aquamarine;
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
				
				-webkit-animation: move ease 2s forwards 2s;
				-moz-animation: move ease 2s forwards 2s;
				-o-animation: move ease 2s forwards 2s;
				animation: move ease 2s forwards 2s;
			}
			@-webkit-keyframes move{
				from{
					width: 100px;
					height: 100px;
				}
				50%{
					width: 100px;
					height: 100px;
					border-radius: 50px;
				}
				75%{
					width: 100px;
					height: 100px;
					border-radius: 50px;
				}
				to{
					width: 150px;
					height: 150px;
					border-radius: 75px;
				}
			}
		</style>
	</head>
	<body>
		<!--1.求出abcdgbcdabddaabbdgbb 这个字符串中 出现次数最高的字符, 并输出其出现的次数!-->
		<!--2.CSS3新增伪类选择器有哪些?-->
		<p>
			:first-of-type    p:first-of-type    选择属于其父元素的首个 <p> 元素的每个 <p> 元素。     
			:last-of-type    p:last-of-type    选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
			:only-of-type    p:only-of-type    选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
			:only-child    p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
			:nth-child(n)    p:nth-child(2)    选择属于其父元素的第二个子元素的每个 <p> 元素。 
			:nth-last-child(n)    p:nth-last-child(2)    同上，从最后一个子元素开始计数。
			:nth-of-type(n)    p:nth-of-type(2)    选择属于其父元素第二个 <p> 元素的每个 <p> 元素。   
			:nth-last-of-type(n)    p:nth-last-of-type(2)    同上，但是从最后一个子元素开始计数。     
			:last-child    p:last-child    选择属于其父元素最后一个子元素每个 <p> 元素。  
			:root    :root    选择文档的根元素。   
			:empty    p:empty    选择没有子元素的每个 <p> 元素（包括文本节点）。  
			:target    #news:target    选择当前活动的 #news 元素。
			:enabled    input:enabled    选择每个启用的 <input> 元素。  
			:disabled    input:disabled    选择每个禁用的 <input> 元素  
			:checked    input:checked    选择每个被选中的 <input> 元素。  
			:not(selector)    :not(p)    选择非 <p> 元素的每个元素。
			::selection    ::selection    选择被用户选取的元素部分。
		</p>
		
		<!--3.用CSS编写, div旋转90度, 0.5秒后变圆, 0.5秒后放大?-->
		<hr />
		<div id="div1"></div>
		<hr />
		<!--4.列举2种强制类型转换和1种隐式类型装换?-->
			强制转换：
			<br />Boolean(0)                // => false - 零
			<br />Boolean(new object())   // => true - 对象
			<br />Number(undefined)       // =>   NaN
			<br />Number(null)              // => 0
			<br />String(null)              // => "null"
			隐式转换：
			四则运算，判断语句
			<hr />
		<!--5.split()和join()的区别?-->
		<script type="text/JavaScript">
			var x;
			var a=new Array();
			a[0]="XHTML";
			a[1]="CSS";
			a[2]="JavaScript";
			console.log(a.join("&"));
			console.log(typeof(a.join("&")));
			//join() 方法用于把数组中的所有元素放入一个字符串
			//元素是通过指定的分隔符进行分隔的。 
			//指定分隔符方法join("#");其中#可以是任意
		</script>
		<script type="text/javascript">
			//与之相反的是split()方法：用于把一个字符串分割成字符串数组. 
			//stringObject.split(a,b)这是它的语法
			//a是必须的决定个从a这分割
			//b不是必须的，可选。该参数可指定返回的数组的最大长度 。
			
//			提示和注释
//			注释：如果把空字符串 ("") 用作 a，那么 stringObject 中的每个字符之间都会被分割。
//			注释：String.split() 执行的操作与 Array.join 执行的操作是相反的。
			var str="how are you?";
			document.write(str.split("")+"<br />");
			document.write(str.split(" ")+"<br />");
			document.write(str.split("",3)+"<br />");
//			返回
//			h,o,w, ,a,r,e, ,y,o,u,?
//			how,are,you?
//			h,o,w
		</script>
		
		<script type="text/javascript">
			//1.判断一个字符串中出现次数最多的字符，统计这个次数
			var str = 'abcdgbcdabddaabbdgbb';
			var json = {};
			for (var i=0;i<str.length;i++) {
				if (!json[str.charAt(i)]) {//charAt() 方法可返回指定位置的字符
					 // 首先得到i位置的字符char  再判断 json[char]是否存在 如果不存在就赋值为1
					json[str.charAt(i)] = 1;
				} else{ //如果存在 就在原来值的基础上加1
					json[str.charAt(i)]++;
				}
			}
//			console.log(json);//Object {a: 9, s: 7, d: 1, f: 1}
//			console.log(json.a);//9
			var iMax = 0;
			var iIndex = '';
			for(var i in json){//遍历JSON对象
				console.log(json[i]);//9，7，1，1
				if(json[i]>iMax){
					iMax = json[i];
					iIndex = i;
				}
			}
			console.log('出现次数最多的是:'+iIndex+'出现'+iMax+'次');
		</script>
		
	</body>
</html>
